<template>
    <div>
        <button @click="handleBack">返回</button>
        detail
        <h3>猜你喜欢</h3>
        <ul>
            <li @click="handleClick">电影1</li>
        </ul>
    </div>
</template>
<!-- <script>
export default {
    mounted() {
        //第一类-params类型
        console.log("收到请求参数", this.$route.params.myid);

        //第二类-query类型
        // console.log("收到请求参数", this.$route.query.myid);
    },
    methods: {
        handleBack() {
            this.$router.back() //返回
            // this.$router.go(-1)

            // this.$router.forward() //前进
            // this.$router.go(1)
        },
        handleClick() {
            //详情页面跳转详情页面，需要用watch进行监听
            this.$router.push("/detail/123")
        }
    },
    // watch: {
    //     "$route.params": function () {
    //         console.log("猜你喜欢请求参数", this.$route.params.myid);
    //     }
    // }

    //等效于上面watch方式
    beforeRouteUpdate(to, from) {
        //这里不能用this.$route，否则拿到的是旧的数据
        console.log("猜你喜欢请求参数beforeRouteUpdate:", to.params.myid);
    }
}
</script> -->

<script setup>
import { onMounted, onBeforeMount, onBeforeUnmount } from 'vue';
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';
import { useStore } from 'vuex';

const route = useRoute()
const router = useRouter()
const store = useStore()

onBeforeMount(() => {
    store.commit("TabbarModule/changeTabbar", false)//开启命名空间以后需要指定具体的module
})

onMounted(() => {
    console.log("收到请求参数", route.params.myid)
})

onBeforeUnmount(() => {
    store.commit("TabbarModule/changeTabbar", true)
})

const handleBack = () => {
    router.back()
}

const handleClick = () => {
    router.push("/detail/123")
}

onBeforeRouteUpdate((to, from) => {
    console.log("猜你喜欢请求参数onBeforeRouteUpdate:", to.params.myid);
})
</script>